<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      width: 400px;
      height: 100px;
      background-color: bisque;
    }
  </style>
  <body>
    <div class="box"></div>
    <script>
      window.onload = () => {
        styleDirective(box, { value: 'red' })
      }
      const box = document.querySelector('.box')

      const styleDirective = (el, bind) => {
        const color = bind.value
        const w = el.getBoundingClientRect().width
        const h = el.getBoundingClientRect().height
        el.style.position = 'relative'
        el.style.overflow = 'hidden'
        const outBox = getOutBoxDom(w, h)
        const BoLang = getBoLangDom(color)
        outBox.appendChild(BoLang)
        el.appendChild(outBox)
        el.addEventListener('mousedown', e => {
          const x = e.offsetX
          const y = e.offsetY
          jieliuUtil(
            () => changeLocation(BoLang, y, x),
            1000,
            () => {
              BoLang.style.animation = ''
              BoLang.style.display = 'none'
            }
          )
        })
      }
      const changeLocation = (div, top, left) => {
        div.style.display = 'block'
        div.style.top = top + 'px'
        div.style.left = left + 'px'
        let style = document.styleSheets[0]
        style.insertRule(`@keyframes secondrotate
        {
            0%{
                z-index: 1;
                opacity:1;
                transform:scale(1)
            }
            100%
            {transform:scale(100); opacity:0;}
        }`)
        div.style.animation = `secondrotate 1s ease`
      }
      const getBoLangDom = color => {
        let div = document.createElement('div')
        div.style.width = '10px'
        div.style.height = '10px'
        div.style.zIndex = '-1'
        div.style.opacity = '0'
        div.style.borderRadius = '10px'
        div.style.backgroundColor = color || 'red'
        ;(div.style.position = 'absolute'), (div.style.top = '0')
        div.style.left = '0'

        return div
      }
      const getOutBoxDom = (width, height) => {
        let div = document.createElement('div')
        div.style.width = width + 'px'
        div.style.height = height + 'px'
        div.style.position = 'absolute'
        div.style.top = '0'
        div.style.left = '0'
        div.style.overflow = 'hidden'
        div.style.zIndex = '1'
        return div
      }
      const jieliu = () => {
        let ifNext = true
        return (cb, time, callBack) => {
          if (ifNext) {
            ifNext = false
            cb()
            setTimeout(() => {
              callBack && callBack()
              ifNext = true
            }, time)
          }
        }
      }
      const jieliuUtil = jieliu()
    </script>
  </body>
</html>
